<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="promotion-page min-h-screen bg-gray-50">
    <!-- 1. Carousel Component -->
    <view class="px-2 mt-2">
      <view class="relative rounded-lg overflow-hidden">
        <view class="carousel-container">
          <view
            class="carousel-slides flex transition-transform duration-300 ease-in-out"
            :style="{ transform: `translateX(-${activeSlide * 100}%)` }"
          >
            <view
              v-for="(slide, index) in carouselSlides"
              :key="index"
              class="carousel-slide w-full flex-shrink-0"
            >
              <image
                :src="slide.image"
                :alt="slide.title"
                class="w-full h-40 object-cover rounded-lg"
              />
            </view>
          </view>

          <!-- Carousel Indicators -->
          <view class="absolute bottom-2 left-0 right-0 flex justify-center space-x-2">
            <view
              v-for="(slide, index) in carouselSlides"
              :key="index"
              class="w-2 h-2 rounded-full transition-colors"
              :class="activeSlide === index ? 'bg-orange-500' : 'bg-white/70'"
              @click="setActiveSlide(index)"
            ></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 2. Product Category Selection -->
    <view class="mt-4 px-2">
      <view class="category-container overflow-x-auto">
        <view class="flex space-x-4 py-2">
          <view
            v-for="(category, index) in categories"
            :key="index"
            class="px-2 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors"
            :class="
              activeCategory === index
                ? 'bg-orange-500 text-white'
                : 'bg-white text-gray-700 border border-gray-200'
            "
            @click="setActiveCategory(index)"
          >
            {{ category }}
          </view>
        </view>
      </view>
    </view>

    <!-- 3. Promotion Type Selection -->
    <view class="mt-3 px-2">
      <view class="bg-white rounded-lg shadow-sm">
        <view class="promotion-type-container overflow-x-auto">
          <view class="flex border-b">
            <view
              v-for="(type, index) in promotionTypes"
              :key="index"
              class="px-2 py-3 text-sm font-medium whitespace-nowrap flex-1 text-center relative"
              :class="activePromotionType === index ? 'text-orange-500' : 'text-gray-600'"
              @click="setActivePromotionType(index)"
            >
              {{ type }}
              <view
                v-if="activePromotionType === index"
                class="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500"
              ></view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 4. Product List -->
    <view class="mt-4 px-2 pb-20">
      <view class="grid grid-cols-2 gap-3">
        <view
          v-for="(product, index) in filteredProducts"
          :key="index"
          class="bg-white rounded-lg shadow-sm overflow-hidden relative"
        >
          <!-- Promotion Type Label -->
          <view
            class="absolute top-0 right-0 bg-orange-500 text-white text-xs px-2 py-1 rounded-bl-lg"
          >
            {{ product.promotionType }}
          </view>

          <image :src="product.image" :alt="product.name" class="w-full h-32 object-cover" />

          <view class="p-3">
            <view class="font-medium text-gray-800 text-sm line-clamp-2 h-10">
              {{ product.name }}
            </view>
            <view class="text-xs text-gray-500 mt-1 line-clamp-1">{{ product.storeName }}</view>

            <view class="mt-2 flex items-baseline">
              <text class="text-xs text-orange-500 mr-0.5">¥</text>
              <text class="text-lg font-bold text-orange-500">{{ product.promotionPrice }}</text>
              <text class="text-xs text-gray-400 line-through ml-1">
                ¥{{ product.originalPrice }}
              </text>
            </view>

            <view class="mt-2 flex items-center justify-between">
              <text class="text-xs text-gray-500">已售{{ product.salesCount }}</text>
              <view class="bg-orange-500 text-white text-xs px-3 py-1 rounded-full">立即抢购</view>
            </view>
          </view>
        </view>
      </view>

      <!-- Loading More Indicator -->
      <view v-if="isLoading" class="mt-4 flex items-center justify-center py-4">
        <view
          class="w-5 h-5 border-2 border-orange-500 border-t-transparent rounded-full animate-spin mr-2"
        ></view>
        <text class="text-sm text-gray-600">加载更多中...</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 1. Carousel Component
const carouselSlides = [
  {
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    title: '限时特惠，全场5折起',
  },
  {
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    title: '新品上市，买一送一',
  },
  {
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    title: '周末狂欢，满100减50',
  },
  {
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    title: '会员专享，额外95折',
  },
]

const activeSlide = ref(0)
const carouselInterval = ref(null)

const setActiveSlide = (index) => {
  activeSlide.value = index
  resetCarouselTimer()
}

const resetCarouselTimer = () => {
  if (carouselInterval.value) {
    clearInterval(carouselInterval.value)
  }

  carouselInterval.value = setInterval(() => {
    activeSlide.value = (activeSlide.value + 1) % carouselSlides.length
  }, 3000)
}

onMounted(() => {
  resetCarouselTimer()
})

onUnmounted(() => {
  if (carouselInterval.value) {
    clearInterval(carouselInterval.value)
  }
})

// 2. Product Category Selection
const categories = ['全部', '美食', '生鲜超市', '生活服务', '休闲娱乐']
const activeCategory = ref(0)

const setActiveCategory = (index) => {
  activeCategory.value = index
  // Reset product list when category changes
  products.value = initialProducts
  hasMoreProducts.value = true
}

// 3. Promotion Type Selection
const promotionTypes = ['全部活动', '限时折扣', '新品上市', '拼团活动', '领券中心']
const activePromotionType = ref(0)

const setActivePromotionType = (index) => {
  activePromotionType.value = index
  // Reset product list when promotion type changes
  products.value = initialProducts
  hasMoreProducts.value = true
}

// 4. Product List
const initialProducts = [
  {
    id: 1,
    name: '【限时特惠】正宗湖南辣椒酱 地道风味 开胃下饭',
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    storeName: '湘味食品专营店',
    promotionPrice: 29.9,
    originalPrice: 39.9,
    salesCount: 2356,
    category: 1, // 美食
    promotionType: '限时折扣',
  },
  {
    id: 2,
    name: '新鲜水果礼盒 应季水果组合装 营养丰富',
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    storeName: '鲜果优选',
    promotionPrice: 89.9,
    originalPrice: 108,
    salesCount: 1892,
    category: 2, // 生鲜超市
    promotionType: '新品上市',
  },
  {
    id: 3,
    name: '【团购优惠】专业上门洗车服务 全城范围内',
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    storeName: '车洁士汽车服务',
    promotionPrice: 49.9,
    originalPrice: 99,
    salesCount: 3210,
    category: 3, // 生活服务
    promotionType: '拼团活动',
  },
  {
    id: 4,
    name: '电影票优惠券 全城影院通用 周末假日均可使用',
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    storeName: '城市娱乐票务',
    promotionPrice: 29.9,
    originalPrice: 45,
    salesCount: 5678,
    category: 4, // 休闲娱乐
    promotionType: '领券中心',
  },
  {
    id: 5,
    name: '【秒杀】手工制作曲奇饼干礼盒 送礼佳品',
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    storeName: '甜心烘焙坊',
    promotionPrice: 59.9,
    originalPrice: 88,
    salesCount: 1756,
    category: 1, // 美食
    promotionType: '限时折扣',
  },
  {
    id: 6,
    name: '有机蔬菜套装 无农药残留 健康食材',
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    storeName: '绿色农场',
    promotionPrice: 69.9,
    originalPrice: 79.9,
    salesCount: 2103,
    category: 2, // 生鲜超市
    promotionType: '新品上市',
  },
]

const products = ref([...initialProducts])
const isLoading = ref(false)
const hasMoreProducts = ref(true)

// Filter products based on active category and promotion type
const filteredProducts = computed(() => {
  let result = [...products.value]

  // Filter by category
  if (activeCategory.value !== 0) {
    // Not "All"
    result = result.filter((product) => product.category === activeCategory.value)
  }

  // Filter by promotion type
  if (activePromotionType.value !== 0) {
    // Not "All Activities"
    const promotionTypeText = promotionTypes[activePromotionType.value]
    result = result.filter((product) => product.promotionType === promotionTypeText)
  }

  return result
})

// Infinite scroll
const loadMoreProducts = () => {
  if (isLoading.value || !hasMoreProducts.value) return

  isLoading.value = true

  // Simulate API call to load more products
  setTimeout(() => {
    const newProducts = [
      {
        id: products.value.length + 1,
        name: '【限量】进口红酒套装 高品质葡萄酒 送礼自饮两相宜',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        storeName: '酒世界专营店',
        promotionPrice: 199,
        originalPrice: 299,
        salesCount: 876,
        category: 1, // 美食
        promotionType: '限时折扣',
      },
      {
        id: products.value.length + 2,
        name: '新鲜海鲜礼盒 大虾鲍鱼组合 顺丰冷链配送',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        storeName: '海鲜直供',
        promotionPrice: 299,
        originalPrice: 399,
        salesCount: 1245,
        category: 2, // 生鲜超市
        promotionType: '新品上市',
      },
      {
        id: products.value.length + 3,
        name: '【团购】家庭保洁服务 专业除尘除螨 深度清洁',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        storeName: '洁净家政',
        promotionPrice: 149,
        originalPrice: 199,
        salesCount: 2345,
        category: 3, // 生活服务
        promotionType: '拼团活动',
      },
      {
        id: products.value.length + 4,
        name: '温泉门票优惠券 五星级度假村 含自助餐',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        storeName: '乐游票务',
        promotionPrice: 199,
        originalPrice: 328,
        salesCount: 987,
        category: 4, // 休闲娱乐
        promotionType: '领券中心',
      },
    ]

    // Add new products to the list
    products.value = [...products.value, ...newProducts]

    // Check if we have more products to load
    if (products.value.length > 30) {
      hasMoreProducts.value = false
    }

    isLoading.value = false
  }, 1500)
}

// Detect when user scrolls to the bottom of the page
const handleScroll = () => {
  const scrollPosition = window.innerHeight + window.pageYOffset
  const pageHeight = document.documentElement.scrollHeight

  // If user has scrolled to the bottom (with a small buffer)
  if (pageHeight - scrollPosition < 200) {
    loadMoreProducts()
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.category-container,
.promotion-type-container {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.category-container::-webkit-scrollbar,
.promotion-type-container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
